<div class="container">
  <div class="col-12 col-md-7 col-sm-7 col-lg-5 loginwindow">
    <div class="row">
      <div class="col-12 col-md-12 col-sm-12 col-lg-12">
        <div class="row login-container" data-hook="">
          <div id="content" class="col-sm-12" data-hook="">
            <div class="col-md-12 col-12 col-centered">
              <div class="panel panel-default" *ngIf="emailSent == false">
                <div class="panel-heading">
                  <h3 class="panel-title">Forget Password?</h3>
                </div>
                <p class="login-info-text">Please enter your valid email</p>
                <div
                  id="existing-customer"
                  class="panel-body"
                  data-hook="login"
                >
                  <form
                    class="login-login-form"
                    [formGroup]="forgetPasswordForm"
                    (ngSubmit)="onSubmit()"
                  >
                    <fieldset class="login-input-container">
                      <div class="login-input-item">
                        <input
                          type="email"
                          class="login-user-input-email login-user-input"
                          name="email"
                          placeholder="Your Email Address"
                          formControlName="email"
                          autocomplete="off"
                        />
                        <div
                          *ngIf="
                            forgetPasswordForm.get('email').errors &&
                            forgetPasswordForm.get('email').touched
                          "
                        >
                          <span class="login-error-icon text-danger">!</span>
                          <p class="login-error-message text-danger">
                            {{
                              forgetPasswordForm.get('email').errors.msg ||
                                'Please enter a valid email id'
                            }}
                          </p>
                        </div>
                      </div>
                    </fieldset>
                    <fieldset class="login-login-button-container">
                      <button
                        type="submit"
                        class="btn btn-danger login-login-button"
                      >
                        Reset Password
                      </button>
                    </fieldset>
                  </form>
                </div>
              </div>
              <div class="" *ngIf="emailSent == true">
                <div class="panel-heading">
                  <img
                    src="../../../../assets/custom/rocket.png"
                    class="img-fluid my-4 h-50"
                  />
                  <h3 class="panel-title">Email Sent!</h3>
                  <p>
                    Reset Password instruction has been sent sucessfully on your
                    mail
                  </p>
                  <strong>{{ sentEmail }}!</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
